<template>
  <!--面包屑-->
    <el-row>
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">主页</el-breadcrumb-item>
                <el-breadcrumb-item to="/wisdomeat">智慧食堂</el-breadcrumb-item>
                <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
                <el-breadcrumb-item>商家管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </el-row>
  <!--    数据表格-->
    <el-row>
        <el-table :data="businessList" stripe border style="width: 99%">
            <el-table-column type="index" label="序号" align="center" width="60px"/>
            <el-table-column prop="bnumber" label="商家编号" align="center"/>
            <el-table-column prop="bname" label="商家名称" align="center"/>
            <el-table-column prop="bphone" label="商家电话" align="center"/>
            <el-table-column prop="baddress" label="商家地址" align="center"/>
            <el-table-column prop="bsname" label="营业状态" align="center">
                <template #default="scope">
                <el-tag type="danger" v-if="scope.row.bstatus===3">{{scope.row.bsname}}</el-tag>
                <el-tag type="primary" v-if="scope.row.bstatus===2">{{scope.row.bsname}}</el-tag>
                <el-tag type="success" v-if="scope.row.bstatus===1">{{scope.row.bsname}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="sname" label="入驻状态" align="center">
                <template #default="scope">
                <el-tag type="danger" v-if="scope.row.sid===2">{{scope.row.sname}}</el-tag>
                <el-tag type="success" v-if="scope.row.sid===1">{{scope.row.sname}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-popconfirm
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="#626AEF"
                        title="您确认要解约此商家吗？此操作将会清楚商家所有信息"
                        @confirm="btnDeleteClick(scope.row)"
                    >
                        <template #reference>
                            <el-button type="text">
                                <i class="fa fa-trash"></i>
                                解约
                            </el-button>
                        </template>
                    </el-popconfirm>
                    <el-popconfirm
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="#626AEF"
                        title="您确认要修改商家状态吗？"
                        @confirm="btnRectifyClick(scope.row)"
                    >
                        <template #reference>
                            <el-button type="text" v-if="scope.row.bstatus!=3">
                                <i class="fa fa-trash"></i>
                                整顿
                            </el-button>
                            <el-button v-else type="text">恢复</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!--        逻辑分页-->
        <el-config-provider>
            <el-pagination
                    :current-page="page.currentPage"
                    :page-size="page.pageSize"
                    background
                    layout="total, prev, pager, next,jumper"
                    :total="page.totalCount"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </el-config-provider>
    </el-row>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
    name: "Business",
    data(){
        return{
            businessList:[],//商家列表
            name:'',//管理员姓名
            page: {
                currentPage: 1, //当前页码，初始页码为1
                totalCount: 2, //总数居条数，根据接口获取数据长度
                pageSize: 5, //每页显示的条数
                allTableData: [] //全部表格数据
            },
        }
    },
    methods:{
        //获取商家列表
        initTable(){
            this.name=sessionStorage.getItem('name');
            if(this.name==null){ //判断是否登录
                ElMessage.error({
                    message:'未找到用户信息，请先登录',
                    duration:1000
                });
            }else {
                axios({
                    url: 'http://localhost:8888/businessinfo/getBusinessList',
                    method: 'get',
                }).then((res) => {
                    this.page.allTableData = res.data.data;
                    this.page.totalCount = res.data.total;
                    this.handleCurrentChange(1)
                })
            }
        },
        //解约商家
        btnDeleteClick(row){
            axios({
                url: 'http://localhost:8888/businessinfo/deleteBusiness',
                method: 'post',
                params:{
                    bNumber:row.bnumber
                }
            }).then((res) => {
               if(res.data.success){
                   ElMessage.success({
                       message:'删除成功',
                       duration:1000
                   })
                   this.initTable();
               }
            })
        },
        //整改商家或恢复
        btnRectifyClick(row){
            if(row.bstatus!=3){
                axios({
                    url: 'http://localhost:8888/businessinfo/rectifyBusiness',
                    method: 'post',
                    params:{
                        bNumber:row.bnumber
                    }
                }).then((res) => {
                    if(res.data.success){
                        ElMessage.success({
                            message:'修改成功',
                            duration:1000
                        })
                        this.initTable();
                    }
                })
            }else {
                axios({
                    url: 'http://localhost:8888/businessinfo/offShelfBusiness',
                    method: 'post',
                    params:{
                        bNumber:row.bnumber
                    }
                }).then((res) => {
                    if(res.data.success){
                        ElMessage.success({
                            message:'修改成功',
                            duration:1000
                        })
                        this.initTable();
                    }
                })
            }

        },
        //每页显示的条数
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize //改变每页显示的条数
            this.page.currentPage = 1 //每次变换单页条数后，将页面切换至第一页
            this.handleSizeChange(1) //获取第一页数据
        },
        //显示当前页数据
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage //更新当前页数据
            const pageSize = this.page.pageSize //每页数据量
            this.businessList = [] //清空表绑定的数据
            //获取当前页数据范围：（当前页-1）*每页数据-当前页*每页数据
            this.businessList = this.page.allTableData.slice((((currentPage - 1) * pageSize)), (currentPage * pageSize))
        },
    },
    mounted() {
        this.initTable();
    }
}
</script>

<style scoped>
.breadcrumb {
    padding: 10px;
}
</style>